<template>
    <div class="arrow-txt" :style="style">
        <span class="iconfont icon-xiangshang" :class="{ up }"></span>
        {{ props.txt }}
    </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";

const props = defineProps({
    txt: String,
    up: Boolean,
    size: Number
});

const style = computed(() => {
    return {
        color: props.up ? "#0DCB81" : "#F6475D",
        fontSize: props.size ? props.size + "px" : "12px"
    };
});
</script>

<style lang="less" scoped>
.arrow-txt {
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-xiangshang {
    transform: rotate(135deg);
}
.up {
    transform: rotate(45deg);
}
</style>
